<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="/css/detail.css" />
    <link rel="stylesheet" type="text/css" href="/lib/font-awesome-4.7.0/css/font-awesome.css" />
  </head>

  <body>
    <div class="wrap">
      <!--头-->
      <header>
        <!--语言切换-->
        <div class="top">
          <a href="#">English</a>
        </div>
        <!--logo、导航、搜索、登录接口、购物车接口-->
        <div class="bottom">
          <!--logo-->
          <a href="#" class="logo"><img src="/images/logo.png" /></a>
          <!--导航-->
          <div class="menu">
            <a href="/">首页</a>
            <span>
	        	  <a href="/html/list.html" class="shop">商城</a>
	        	  <div class="shop-list">
		          	<ul class="mall-nav-tit">
		              <li><a href="#">新品上市</a></li>
		              <li><a href="#">热卖上市</a></li>
		          	</ul>
		          	<ul>
		           		<li class="mall-nav-tit2"><a href="#">男鞋</a></li>
		           		<li><a href="#">跑步鞋</a></li>
		           		<li><a href="#">篮球鞋</a></li>
		            	<li><a href="#">休闲生活鞋</a></li>
		            	<li><a href="#">综训鞋</a></li>
		            	<li><a href="#">户外鞋</a></li>
		            	<li><a href="#">滑板鞋</a></li>
		          	</ul>
		          	<ul>
		            	<li class="mall-nav-tit2"><a href="#">女鞋</a></li>
		            	<li><a href="#">跑步鞋</a></li>
		            	<li><a href="#">休闲生活鞋</a></li>
		            	<li><a href="#">综训鞋</a></li>
		            	<li><a href="#">户外鞋</a></li>
		            	<li><a href="#">滑板鞋</a></li>
		          	</ul>
		          	<ul>
		            	<li class="mall-nav-tit2"><a href="#">男装</a></li>
		            	<li><a href="#">T恤/polo/背心</a></li>
		            	<li><a href="#">卫衣</a></li>
		            	<li><a href="#">外套/马甲</a></li>
		            	<li><a href="#">篮球服</a></li>
		            	<li><a href="#">健身服</a></li>
		            	<li><a href="#">裤装</a></li>
		          	</ul>
		          	<ul>
		            	<li class="mall-nav-tit2"><a href="#">女装</a></li>
		            	<li><a href="#">T恤/polo/背心</a></li>
		            	<li><a href="#">卫衣</a></li>
		            	<li><a href="#">外套/马甲</a></li>
		            	<li><a href="#">篮球服</a></li>
		            	<li><a href="#">健身服</a></li>
		            	<li><a href="#">裤装</a></li>
		          	</ul>		        
			      	</div>    
		        </span>
            <a href="#">新闻</a>
            <a href="#">团购定制</a>
          </div>
          <!--搜索、登录接口、购物车接口-->
          <div class="nav">
            <!--搜索-->
            <div class="search">
              <input type="text" name="search" id="search" placeholder="查找鞋服" />
              <a href="#"><i class="fa fa-search-plus"></i></a>
            </div>
            <!--登录接口-->
            <a href="/html/login.html"><i class="fa fa-user-o"></i></a>
            <!--购物车接口-->
            <span class="cart">
              <a href="/html/cart.html">
                <i class="fa fa-shopping-cart"></i>
                <span class="number">0</span>
              </a>
              <div class="to-cart">
                <h2>您的购物车还没有商品</h2>
                <a href="/html/list.html">去逛逛</a>
              </div>
            </span>
          </div>
        </div>
      </header>

      <!--主体-->
      <main>
        <div class="top">
          <div class="title">
            <span>所有分类&gt;</span>
            <a href="/">首页&gt;</a>
            <a href="">商品列表&gt;</a>
            <b>男常规跑鞋</b>
          </div>
          <div class="box">
            <div class="left">

            </div>
            <div class="right">
              <h2>男常规跑鞋<em>(671812208)</em></h2>
              <h3>￥299.00</h3>
              <!---->
              <div class="fit">
                <span>原价:<b>299.00</b></span>
                <span>运费: 不包邮	<a class="" href="javascript:void(0);">( 运费详情 ) </a></span>
              </div>
              <p class="color">颜色分类<span>361度白/乌黑色</span></p>
              <ul class="color-img">
                <li><img title="361度白/乌黑色" src="/images/m1.jpg" class="select"></li>
                <li><img title="军装绿/乌黑色" src="/images/m1.jpg"></li>
                <li><img title="亚麻褐/深泥棕" src="/images/m1.jpg"></li>
                <li><img title="乌黑色/361度白" src="/images/m1.jpg"></li>
              </ul>
              <div class="number-size">
                <button class="choice">尺码选择   +</button>
                <strong>
									<span>数量:</span>
									<button class="increment changenum">-</button>
									<input type="text" name="number" value="1" readonly="readonly">
									<button class="decrement changenum" >+</button>
								</strong>
                <div class="size">
                  <ul>
                    <li class="select">
                      <a href="#">39</a>
                    </li>
                    <li class="">
                      <a href="#">40</a>
                    </li>
                    <li class="on">
                      <a href="#">41</a>
                    </li>
                    <li class="">
                      <a href="#">42</a>
                    </li>
                    <li class="on">
                      <a href="#">43</a>
                    </li>
                    <li class="">
                      <a href="#">44</a>
                    </li>
                    <li class="on">
                      <a href="#">45</a>
                    </li>
                    <li class="on">
                      <a href="#">46</a>
                    </li>
                    <li class="on">
                      <a href="#">47</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="buy">
                <button class="addcart">加入购物车</button>
                <button class="buynow">立即购买</button>
                <div class="link">
                  <a href="javascript:void(0);" title="收藏商品" class="">收藏</a>
                  <a href="javascript:void(0);" title="收藏商品" class=""><i class="fa fa-star-o"></i></a>
                  <div class="share-box">
                    <a href="#" class="share">
                      <span>分享</span>
                      <i class="fa fa-share-alt"></i>
                    </a>
                    <ul class="share-list">
                      <div class="shareto">分享到</div>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>一键分享</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-qq"></i>QQ空间</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>新浪微博</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>百度云收藏</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weixin"></i>微信</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>人人网</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-qq"></i>腾讯微博</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weixin"></i>百度相册</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>开心网</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-qq"></i>腾讯朋友</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weixin"></i>百度贴吧</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>豆瓣网</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>百度新首页</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-qq"></i>QQ好友</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weibo"></i>和讯微博</a>
                      </li>
                      <li>
                        <a href="#"><i class="fa fa-weixin"></i>百度中心</a>
                      </li>
                      <div class="more">
                        <a href="#" onclick="return false;" target="_blank;"><i class="fa fa-stop"></i>更多...</a>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <p><img src="/images/d1.jpg" /></p>
          <p><img src="/images/d2.jpg" /></p>
          <p><img src="/images/d3.jpg" /></p>
          <p><img src="/images/d4.jpg" /></p>
          <p><img src="/images/d5.jpg" /></p>
          <p><img src="/images/d6.jpg" /></p>
          <p><img src="/images/d7.jpg" /></p>
          <p><img src="/images/d8.jpg" /></p>
          <p><img src="/images/d9.jpg" /></p>
          <p><img src="/images/d10.jpg" /></p>
          <p><img src="/images/d11.jpg" /></p>
          <p><img src="/images/d12.jpg" /></p>
          <p><img src="/images/d13.jpg" /></p>
          <p><img src="/images/d14.jpg" /></p>
          <p><img src="/images/d15.jpg" /></p>
          <p><img src="/images/d16.jpg" /></p>
          <p><img src="/images/d17.jpg" /></p>
          <p><img src="/images/d18.jpg" /></p>
          <p><img src="/images/d19.jpg" /></p>
          <p><img src="/images/d20.jpg" /></p>
        </div>
      </main>
      <!--尾-->
      <footer>
        <!--内容-->
        <div class="content">
          <dl>
            <dt>关于361°</dt>
            <dd>
              <a href="#" target="_blank">投资者关系</a>
            </dd>
            <dd>
              <a href="#">集团简介</a>
            </dd>
            <dd>
              <a href="#" target="_blank">361°BIFT</a>
            </dd>
            <dd>
              <a href="#">社会责任</a>
            </dd>
            <dd>
              <a href="#">品牌历程</a>
            </dd>
            <dd>
              <a href="#">品牌新闻</a>
            </dd>
            <dd>
              <a href="#">集团招聘</a>
            </dd>
            <dd>
              <a href="#">联系我们</a>
            </dd>
          </dl>
          <dl>
            <dt>如何购物</dt>
            <dd>
              <a href="#" target="_blank">店铺查询</a>
            </dd>
            <dd>
              <a href="#">购物流程</a>
            </dd>
            <dd>
              <a href="#">订单查询</a>
            </dd>
            <dd>
              <a href="#">会员及积分体系</a>
            </dd>
          </dl>
          <dl>
            <dt>支付方式</dt>
            <dd>
              <a href="#">支付方式</a>
            </dd>
            <dd>
              <a href="#">发票说明</a>
            </dd>
          </dl>
          <dl>
            <dt>物流配送</dt>
            <dd>
              <a href="#">配送时间和范围</a>
            </dd>
            <dd>
              <a href="#">配送费用</a>
            </dd>
            <dd>
              <a href="#">商品验收</a>
            </dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd>
              <a href="#">退换货流程</a>
            </dd>
            <dd>
              <a href="#">售后服务政策</a>
            </dd>
          </dl>
          <dl>
            <dt>联系方式</dt>
            <dd>QQ客服：476849964</dd>
            <dd>全国服务热线</dd>
            <dd>400-6661-361</dd>
            <dd>工作时间：周一至周五（工<br />作日）</dd>
            <dd>(9:00-12:00 13:00-18:00)</dd>
            <dd style="margin-top: 20px;">地址：福建省厦门市湖里区<br />墩岭路159号三六一度大楼</dd>
            <dd>邮编：361009</dd>
          </dl>
          <div class="contact">
            <h2>关注我们</h2>
            <ul>
              <li>
                <a href="#" target="view_window"><img src="/images/weibo.png"></a>
              </li>
              <li class="WeChat">
                <img src="/images/xinxi.png">
                <div class="code">
                  <div>
                    <img src="/images/ewm1.jpg">
                    <p>361°订阅号</p>
                  </div>
                  <div>
                    <img src="/images/ewm2.jpg">
                    <p>361°服务号</p>
                  </div>
                </div>
              </li>
            </ul>

          </div>
        </div>
        <!--连接-->
        <p class="certificate">
          <a href="#">友情链接</a>
          中国 闽ICP备05003868号 ©2013 三六一度(中国)有限公司 All Rights Reserved
        </p>

      </footer>
    </div>
  </body>

</html>